/* eslint-disable no-unused-vars */
// 圆形，正方形，菱形绘制
import inherits from 'inherits'

import BaseRenderer from 'diagram-js/lib/draw/BaseRenderer'
import {
    isObject,
    assign,
    forEach
} from 'min-dash';
import {
    append as svgAppend,
    create as svgCreate,
    classes as svgClasses
} from 'tiny-svg'

import { customElements, customConfig } from '../../utils/util'
/**
 * A renderer that knows how to render custom elements.
 */
export default function CustomRenderer(eventBus, styles, textRenderer) {
    BaseRenderer.call(this, eventBus, 2000)

    var computeStyle = styles.computeStyle

    function renderLabel(parentGfx, label, options) {

        options = assign({
            size: {
                width: 100
            }
        }, options);

        var text = textRenderer.createText(label || '', options);

        svgClasses(text).add('djs-label');

        svgAppend(parentGfx, text);

        return text;
    }

    this.drawCustomElements = function (parentNode, element) {
        // console.log(element, 'element')
        const type = element.type // 获取到类型
        if (type !== 'label') {
            if (customElements.includes(type)) { // or customConfig[type]
                const { attr } = customConfig[type]
                let customIcon
                if (type == 'bpmn:Task') {
                   /**
                    * custom
                    * 1:圆形
                    * 2：矩形
                    * 3：菱形
                    */
                    if (element.businessObject.$attrs.custom == 1) {
                        customIcon = svgCreate('circle', {
                            cx: attr.width / 2,
                            cy: attr.width / 2,
                            r: attr.width / 1.8,
                            "fill": "#fff",
                            "stroke": "#67717D",
                        })
                        // 标题部分
                        const title = svgCreate('text', {
                            y: attr.y + attr.width / 4.5,
                            x: -30,
                            "font-size": "18",
                            "font-weight": "500",
                            "fill": "#333",
                        })
                        title.innerHTML = element.businessObject.$attrs.title ||'';
                        // 内容部分
                        const text = svgCreate('text', {
                            y: attr.y + attr.width / 2.4,
                            x: -80,
                            "font-size": "15",
                            "font-weight": "500",
                            "fill": "#333",
                        })
                        let _text = (element.businessObject.$attrs.time ||'' ) + (element.businessObject.$attrs.conditions ||'') + (element.businessObject.$attrs.standard ||'');
                        if(_text){
                         let num = _text.length / 10;
                         for(let i = 0 ;i< num; i++){
                            let tspan =  svgCreate('tspan', {
                              y: attr.y + attr.width / 2.4 + i*20,
                              x: -80,
                              "font-size": "18",
                              "font-weight": "500",
                              "fill": "#333",
                            })
                            svgAppend(text, tspan)
                            tspan.innerHTML = _text.slice(i*10,i*10 + 10)
                         }
                        }

                        // 单位部分
                        const unit = svgCreate('text', {
                            y: attr.y + 6 * attr.width / 6.8,
                            x: -14,
                            "font-size": "16",
                            "fill": "#88919B",
                        })
                        unit.innerHTML = element.businessObject.$attrs.unit ||''
                        // 横线部分
                        const line1 = svgCreate('line', {
                            x1: attr.width / 9,
                            y1: attr.y + attr.width / 3.3,
                            x2: 4 * attr.width / 4.5,
                            y2: attr.y + attr.width / 3.3,
                            "stroke": "#67717D",
                            "stroke-width": "2"
                        })
                        const line2 = svgCreate('line', {
                            x1: attr.width / 9,
                            y1: attr.y + 3 * attr.width / 3.9,
                            x2: 4 * attr.width / 4.5,
                            y2: attr.y + 3 * attr.width / 3.9,
                            "stroke": "#67717D",
                            "stroke-width": "2"
                        })
                        svgAppend(parentNode, customIcon)
                        svgAppend(parentNode, line1)
                        svgAppend(parentNode, line2)
                        // 标题位置调整
                        const textWidthTitle = element.businessObject.$attrs.title.length / 2 * 14;
                        const centerXTitle = attr.x + (attr.width - textWidthTitle) / 2;
                        title.setAttribute("transform", "translate(" + centerXTitle + ", 0)");
                        svgAppend(parentNode, title)
                        // 内容位置调整
                        let textWidthText = element.businessObject.$attrs.text.length / 2 * 14;
                        let centerXText = attr.x + (attr.width - textWidthText) / 2;
                        text.setAttribute("transform", "translate(" + centerXText + ", 0)");
                        svgAppend(parentNode, text)
                         // 单位位置调整
                        let textWidthUnit = element.businessObject.$attrs.unit.length / 2 * 14;
                        let centerXUnit = attr.x + (attr.width - textWidthUnit) / 2;
                        unit.setAttribute("transform", "translate(" + centerXUnit + ", 0)");
                        svgAppend(parentNode, unit)
                    } else if (element.businessObject.$attrs.custom == 2) {
                        customIcon = svgCreate('rect', {
                            width: attr.width,
                            height: attr.height,
                            "fill": "#fff",
                            "stroke": "#67717D"
                        })
                        // 标题部分
                        const title = svgCreate('text', {
                            y: attr.y + attr.width / 6,
                            x:-30,
                            "font-size": "18",
                            "font-weight": "500",
                            "fill": "#333",
                        })
                        title.innerHTML = element.businessObject.$attrs.title || '';
                        // 内容部分
                        const text = svgCreate('text', {
                            y: attr.y + attr.width / 2.6,
                            x: -68,
                            "font-size": "15",
                            "fill": "#333",
                        })
                        let _text = (element.businessObject.$attrs.conditions||'') + (element.businessObject.$attrs.standard||'') + (element.businessObject.$attrs.time || '');
                        if(_text){
                         let num = _text.length / 8;
                         for(let i = 0 ;i< num; i++){
                            let tspan =  svgCreate('tspan', {
                              y: attr.y + attr.width / 2.6 + i*20,
                              x: -68,
                              "font-size": "18",
                              "font-weight": "500",
                              "fill": "#333",
                            })
                            svgAppend(text, tspan)
                            tspan.innerHTML = _text.slice(i*8,i*8 + 8)
                         }
                        }
                        // 单位部分
                        const unit = svgCreate('text', {
                            y: attr.y + 6 * attr.width / 6.8,
                            x:-12,
                            "font-size": "16",
                            "fill": "#88919B",
                        })
                        unit.innerHTML = element.businessObject.$attrs.unit || '';
                        // 横线部分
                        const line1 = svgCreate('line', {
                            x1: attr.width / 6,
                            y1: attr.y + attr.width / 4,
                            x2: 5 * attr.width / 6,
                            y2: attr.y + attr.width / 4,
                            "stroke": "#67717D",
                            "stroke-width": "2"
                        })
                        const line2 = svgCreate('line', {
                            x1: attr.width / 6,
                            y1: attr.y + 3 * attr.width / 4,
                            x2: 5 * attr.width / 6,
                            y2: attr.y + 3 * attr.width / 4,
                            "stroke": "#67717D",
                            "strokeWidth": "2"
                        })
                        svgAppend(parentNode, customIcon)
                        svgAppend(parentNode, line1)
                        svgAppend(parentNode, line2)

                        // 标题位置调整
                        let textWidthRectTitle = element.businessObject.$attrs.title.length / 2 * 14;
                        let centerXRectTitle = attr.x + (attr.width - textWidthRectTitle) / 2;
                        title.setAttribute("transform", "translate(" + centerXRectTitle + ", 0)");
                        svgAppend(parentNode, title)
                        // 内容位置调整
                        let textWidthRectText = element.businessObject.$attrs.text.length / 2 * 14;
                        let centerXRectText = attr.x + (attr.width - textWidthRectText) / 2;
                        text.setAttribute("transform", "translate(" + centerXRectText + ", 0)");
                        svgAppend(parentNode, text)
                        // 单位位置调整
                        let textWidthRectUnit = element.businessObject.$attrs.unit.length / 2 * 14;
                        let centerXRectUnit = attr.x + (attr.width - textWidthRectUnit) / 2;
                        unit.setAttribute("transform", "translate(" + centerXRectUnit + ", 0)");
                        svgAppend(parentNode, unit)
                    }
                    else {
                        customIcon = svgCreate('polygon', {
                            points: `0,${attr.height / 2} ${attr.width / 2},0 ${attr.width},${attr.height / 2} ${attr.width / 2},${attr.height}`,
                            "fill": "#fff",
                            "stroke": "#67717D"
                        })
                        // 标题部分
                        const title = svgCreate('text', {
                            y: attr.y + attr.width / 3,
                            x:-6,
                            "font-size": "18",
                            "font-weight": "500",
                            "fill": "#333",
                        })

                        let _title = element.businessObject.$attrs.title || '';
                        if(_title){
                         let num = _title.length / 5;
                         for(let i = 0 ;i< num; i++) {
                            let tspan =  svgCreate('tspan', {
                              y: attr.y + attr.width / 2.8 + i*20,
                              x:-6,
                              "font-size": "18",
                              "font-weight": "500",
                              "fill": "#333",
                            })
                            svgAppend(title, tspan)
                            tspan.innerHTML = _title.slice(i*5,i*5 + 5)
                         }
                        }

                        // 单位部分
                        const unit = svgCreate('text', {
                            y: attr.y + 2 * attr.width / 2.7,
                            x:-18,
                            "font-size": "16",
                            "fill": "#88919B",
                        })
                        unit.innerHTML = element.businessObject.$attrs.unit || '';
                        const line1 = svgCreate('line', {
                            x1: attr.width / 4,
                            y1: attr.y + attr.width / 1.7,
                            x2: 3 * attr.width / 4,
                            y2: attr.y + attr.width / 1.7,
                            "stroke": "#67717D",
                            "stroke-width": "2"
                        })
                        
                        // title.innerHTML = element.businessObject.$attrs.title
                       
                        svgAppend(parentNode, customIcon)
                        svgAppend(parentNode, line1)
                        // 标题位置调整
                        let textWidthPolyTitle = element.businessObject.$attrs.title.length / 2 * 18;
                        let centerXPolyTitle = attr.x + (attr.width - textWidthPolyTitle) / 2;
                        title.setAttribute("transform", "translate(" + centerXPolyTitle + ", 0)");
                        svgAppend(parentNode, title)

                        // 单位位置调整
                        let textWidthPolyUnit = element.businessObject.$attrs.unit.length / 2 * 14;
                        let centerXPolyUnit = attr.x + (attr.width - textWidthPolyUnit) / 2;
                        unit.setAttribute("transform", "translate(" + centerXPolyUnit + ", 0)");
                        svgAppend(parentNode, unit)
                    }
                }
                // element['x'] = element['x']+((element['width']-attr.width)/2)
                element['y'] = element['y'] + ((element['height'] - attr.height) / 2)
                element['width'] = attr.width // 修改图形外面那个虚线框的大小
                element['height'] = attr.height
                // svgAppend(parentNode, customIcon)
                return customIcon
            }
            const shape = this.bpmnRenderer.drawShape(parentNode, element)
            return shape
        } else {
            element
        }
    }
}


inherits(CustomRenderer, BaseRenderer)

CustomRenderer.$inject = ['eventBus', 'styles', 'textRenderer']

CustomRenderer.prototype.canRender = function (element) {
    // ignore labels
    return true
    // return !element.labelTarget;
}

CustomRenderer.prototype.drawShape = function (p, element) {
    // console.log(element)
    // console.log(element.type)
    if (customElements.includes(element.type)) {
        return this.drawCustomElements(p, element)
    }
}

CustomRenderer.prototype.getShapePath = function (shape) {
    // console.log(shape)
}